<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { UploadFilled } from '@element-plus/icons-vue'
import { getBankByIdAPI } from '@/apis/bank'
import { addFinanceAPI } from '@/apis/finance'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()
const id = route.params.id
const suffix = route.query.suffix
const finance = ref({
    name: '',
    amount: 0,
    rate: 1.1,
    repayment: '',
    phone: '',
    identityNum: '',
    imgs: []
})

const check = () => {
    if (finance.value.name === '' || finance.value.amount === 0 || finance.value.repayment === '' ||
        finance.value.phone === '' || finance.value.identityNum === '' || finance.value.imgs.length === 0
    ) {
        ElMessage({ type: 'warning', message: '请完整填写申请信息' })
        return false
    }
    return true
}
const add = async () => {
    if (check()) {
        const res = await addFinanceAPI({ bankId: id, ...finance.value })
        if (res.data === 2000) {
            router.replace({ path: '/finance' })
            ElMessage({ type: 'success', message: '申请已提交，等待审核' })
        }
    }
}

// 资料上传
const handleCoverSuccess = (response, uploadFile) => {
    finance.value.imgs.push(response.data)
}

const beforeCoverUpload = (file) => {
    if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        ElMessage({
            type: 'error',
            message: '图片上传格式仅支持 JPEG、JPG、PNG'
        })
        return false
    } else if (file.size / 1024 / 1024 > 10) {
        ElMessage.error('图片大小不要超过 10MB')
        return false
    }
    return true
}

const bank = ref({})
onMounted(async () => {
    const res = await getBankByIdAPI(id)
    if (res.code === 2000) {
        bank.value = res.data
    }
})
</script>

<template>
<div class="finance-page">
    <div class="bank-wrapper">
        <div class="bank-title">银行简介</div>
        <div class="bank-content">
            <div class="l"><img :src="`http://82.157.143.242:9000/rongxiaotong/bank/bank${suffix}.jpg`" alt=""></div>
            <div class="r">
                <div class="name">{{ bank.bankName }}</div>
                <div class="des">
                    {{ bank.introduce }}，本行的小农贷款业务是向符合规定条件的自然人发放的用于农业消费用途的人民币贷款业务，
                    旨在以快捷方便的审批流程和优质的服务满足客户在农业创收、发展中的资金需求。
                </div>
                <div class="">欢迎致电：{{ bank.bankPhone }}</div>
            </div>
        </div>
    </div>
    <div class="apply-wrapper">
        <div class="bank-title">融资申请</div>
        <div class="apply-form">
            <el-form label-width="120px">
                <el-form-item label="姓名">
                    <el-input v-model="finance.name" />
                </el-form-item>
                <el-form-item label="融资额度">
                    <el-input v-model="finance.amount" />
                </el-form-item>
                <el-form-item label="利息">
                    {{ bank.rate }}
                </el-form-item>
                <el-form-item label="意向借款期">
                    <el-select v-model="finance.repayment">
                        <el-option label="12个月" value="12" />
                        <el-option label="24个月" value="24" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="finance.phone" />
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="finance.identityNum" />
                </el-form-item>
                <el-form-item label="上传材料">
                    <el-upload
                        class="upload"
                        :limit="3"
                        :on-success="handleCoverSuccess"
                        :before-upload="beforeCoverUpload"
                        action="http://127.0.0.1:8081/upload"
                        drag
                        multiple>
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div class="operation">
                <el-button type="primary" @click="add">确定申请</el-button>
            </div>
        </div>
    </div>
</div>
</template>

<style>
.upload {
    width: 400px;
}
</style>

<style scoped lang='scss'>

.finance-page {
    width: 1280px;
    margin: 20px auto;
    padding: 20px 40px;
    background-color: #fff;
}

.bank-wrapper {
    margin-bottom: 50px;

    .bank-title {
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #f3f3f3;
    }

    .bank-content {
        display: flex;
        justify-content: space-between;

        .l {
            width: 200px;
            height: 200px;
            padding: 15px;
            border: 1px solid #d8d8d8;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .r {
            width: 980px;
            height: 200px;

            >div {
                margin-bottom: 10px;
            }
        }
    }
}

.apply-wrapper {
    .bank-title {
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #f3f3f3;
    }
}

.apply-form {
    width: 700px;
    min-height: 400px;
    padding: 40px 80px 40px 10px;
    margin: 0 auto;
    border: 1px solid #d8d8d8;
}

.operation {
    display: flex;
    justify-content: end;
}
</style>
